<!DOCTYPE html>
<html>
<body>
<canvas id="circuitCanvas" width="550" height="450" style="border:1px solid #d3d3d3;"></canvas>
<script>
const canvas = document.getElementById('circuitCanvas');
const ctx = canvas.getContext('2d');

// --- Style settings ---
ctx.lineWidth = 1.5;
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.font = 'italic 22px Times New Roman';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// --- Helper Functions ---
// Function to draw a dashed line with an arrowhead
function drawDashedArrow(x1, y1, x2, y2) {
  ctx.save();
  ctx.beginPath();
  ctx.setLineDash([4, 3]);
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
  ctx.setLineDash([]); // Reset to solid line

  const headlen = 8;
  const dx = x2 - x1;
  const dy = y2 - y1;
  const angle = Math.atan2(dy, dx);
  ctx.beginPath();
  ctx.moveTo(x2, y2);
  ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
  ctx.moveTo(x2, y2);
  ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
  ctx.stroke();
  ctx.restore();
}

// --- Main Drawing Logic ---

// Coordinates
const x_batt = 100;
const y_top_main = 100;
const y_bot_main = 400;

const x_R1_start = 150;
const x_R1_end = 250;

const x_A = 320;
const y_A = 150;

const x_B = 320;
const y_B = 350;

const x_R2 = 220;
const x_C = 320;
const x_R3 = 420;

const y_bus_top = 150;
const y_bus_bot = 350;

// Draw main loop (Battery ε and Resistor R1)
// Battery
const y_batt_center = (y_top_main + y_bot_main) / 2;
const y_plate_top = y_batt_center - 10;
const y_plate_bot = y_batt_center + 10;

ctx.beginPath();
ctx.moveTo(x_batt, y_top_main);
ctx.lineTo(x_batt, y_plate_top); // wire to top plate
ctx.moveTo(x_batt, y_plate_bot); // wire from bottom plate
ctx.lineTo(x_batt, y_bot_main);
ctx.stroke();

// Plates
ctx.beginPath();
ctx.moveTo(x_batt - 15, y_plate_top); // Positive plate
ctx.lineTo(x_batt + 15, y_plate_top);
ctx.stroke();

ctx.save();
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(x_batt - 10, y_plate_bot); // Negative plate
ctx.lineTo(x_batt + 10, y_plate_bot);
ctx.stroke();
ctx.restore();
ctx.fillText('ε', x_batt - 30, y_batt_center);

// Top wire and R1
ctx.beginPath();
ctx.moveTo(x_batt, y_top_main);
ctx.lineTo(x_R1_start, y_top_main);
ctx.strokeRect(x_R1_start, y_top_main - 10, x_R1_end - x_R1_start, 20);
ctx.fillText('R₁', (x_R1_start + x_R1_end) / 2, y_top_main - 25);
ctx.moveTo(x_R1_end, y_top_main);
ctx.lineTo(x_A, y_top_main);
ctx.lineTo(x_A, y_A);
ctx.stroke();

// Current I1
drawDashedArrow(x_R1_end - 20, y_top_main + 25, x_R1_start + 20, y_top_main + 25);
ctx.fillText('I₁', (x_R1_start + x_R1_end) / 2, y_top_main + 45);

// Bottom wire from Node B to Battery
ctx.beginPath();
ctx.moveTo(x_B, y_B);
ctx.lineTo(x_B, y_bot_main);
ctx.lineTo(x_batt, y_bot_main);
ctx.stroke();

// Nodes A and B
ctx.beginPath();
ctx.arc(x_A, y_A, 4, 0, 2 * Math.PI);
ctx.fill();
ctx.fillText('A', x_A + 20, y_A);

ctx.beginPath();
ctx.arc(x_B, y_B, 4, 0, 2 * Math.PI);
ctx.fill();
ctx.fillText('B', x_B + 20, y_B);

// Parallel bus bars
ctx.beginPath();
ctx.moveTo(x_R2, y_bus_top);
ctx.lineTo(x_R3, y_bus_top);
ctx.moveTo(x_R2, y_bus_bot);
ctx.lineTo(x_R3, y_bus_bot);
ctx.stroke();

// --- Parallel Branches ---

// Branch with R2
ctx.beginPath();
ctx.moveTo(x_R2, y_bus_top);
ctx.lineTo(x_R2, y_bus_top + 80);
ctx.moveTo(x_R2, y_bus_top + 120);
ctx.lineTo(x_R2, y_bus_bot);
ctx.stroke();
ctx.strokeRect(x_R2 - 10, y_bus_top + 80, 20, 40);
ctx.fillText('R₂', x_R2 - 35, y_bus_top + 100);
drawDashedArrow(x_R2, y_bus_top + 30, x_R2, y_bus_top + 60);
ctx.fillText('I₂', x_R2 - 35, y_bus_top + 45);

// Branch with C
ctx.beginPath();
ctx.moveTo(x_C, y_bus_top);
ctx.lineTo(x_C, y_bus_top + 95);
ctx.moveTo(x_C - 20, y_bus_top + 95); // Top plate
ctx.lineTo(x_C + 20, y_bus_top + 95);
ctx.moveTo(x_C - 20, y_bus_top + 105); // Bottom plate
ctx.lineTo(x_C + 20, y_bus_top + 105);
ctx.moveTo(x_C, y_bus_top + 105);
ctx.lineTo(x_C, y_bus_bot);
ctx.stroke();
ctx.fillText('C', x_C + 35, y_bus_top + 100);
drawDashedArrow(x_C, y_bus_top + 30, x_C, y_bus_top + 60);
// Label for I_C
ctx.fillText('I', x_C - 30, y_bus_top + 45);
ctx.save();
ctx.font = 'italic 16px Times New Roman';
ctx.fillText('C', x_C - 22, y_bus_top + 52);
ctx.restore();


// Branch with R3 and K
// Wires
ctx.beginPath();
ctx.moveTo(x_R3, y_bus_top);
ctx.lineTo(x_R3, y_bus_top + 30); // To switch
ctx.moveTo(x_R3, y_bus_top + 30); // From switch to resistor
ctx.lineTo(x_R3, y_bus_top + 130);
ctx.moveTo(x_R3, y_bus_top + 170); // From resistor to bottom bus
ctx.lineTo(x_R3, y_bus_bot);
ctx.stroke();

// Switch K
ctx.beginPath();
ctx.arc(x_R3, y_bus_top + 30, 4, 0, 2 * Math.PI); // contact point
ctx.fill();
ctx.beginPath();
ctx.moveTo(x_R3, y_bus_top + 30);
ctx.lineTo(x_R3 + 30, y_bus_top + 20); // Open switch arm
ctx.stroke();
ctx.fillText('K', x_R3 + 45, y_bus_top + 25);

// Resistor R3
ctx.strokeRect(x_R3 - 10, y_bus_top + 130, 20, 40);
ctx.fillText('R₃', x_R3 + 25, y_bus_top + 150);

// Current I3
drawDashedArrow(x_R3, y_bus_top + 70, x_R3, y_bus_top + 100);
ctx.fillText('I₃', x_R3 - 30, y_bus_top + 85);

</script>
</body>
</html>